<template>
  <table class="my-table">
      <thead>
        <tr>
            <!-- 先写静态的 再把想动态设置的dom结构 通过slot提出去 -->
            <slot name="head"></slot>
          <!-- <th>编号</th>
          <th>名称</th>
          <th>图片</th>
          <th width="100px">标签</th> -->
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in goods" :key="item.id">
            <!-- 先写静态的 再把想动态设置的dom结构 通过slot提出去 -->
            <slot name="body" :item="item" :index="index"></slot>
          <!-- <td>{{index + 1}}</td>
          <td>{{item.name}}</td>
          <td>
            <img :src="item.picture" />
          </td>
          <td> -->
            <!-- 利用v-model语法糖改写一下 -->
            <!-- <MyTag :value='item.tag' @input="item.tag = $event"></MyTag> -->
            <!-- <MyTag v-model="item.tag"></MyTag>
          </td> -->
        </tr>
      </tbody>
    </table>
</template>

<script>

export default {
    components: {
        
    },
    props: {
        goods: Array
    }
}
</script>

<style lang="less" scoped>
.table-case {
  width: 1000px;
  margin: 50px auto;
  img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    vertical-align: middle;
  }

  .my-table {
    width: 100%;
    border-spacing: 0;
    img {
      width: 100px;
      height: 100px;
      object-fit: contain;
      vertical-align: middle;
    }
    th {
      background: #f5f5f5;
      border-bottom: 2px solid #069;
    }
    td {
      border-bottom: 1px dashed #ccc;
    }
    td,
    th {
      text-align: center;
      padding: 10px;
      transition: all 0.5s;
      &.red {
        color: red;
      }
    }
    .none {
      height: 100px;
      line-height: 100px;
      color: #999;
    }
  }
  
}
</style>